<template>
  <div id="app">
    <div id="header">
      <div id="nav" class="header" clearfix>
        <ul class="header-left">
          <li>
            <router-link tag="li" to="/"><a>系统首页</a></router-link>
          </li>
          <li>
            <router-link tag="li" to="/courselist"><a>基础课程</a></router-link>
          </li>
          <li>
            <router-link tag="li" to="/codinglist"><a class="active">实战案例</a></router-link>
          </li>
          <li>
            <router-link tag="li" to="/wendalist"><a>问答社区</a></router-link>
          </li>
          <li>
            <router-link tag="li" to="/articlelist"><a>手记</a></router-link>
          </li>
        </ul>
      </div>
    </div>
    <div class="shizhan-header">
        <div class="shizhan-header-wrap clearfix">
            <a class="header-icon1" href="/" style="height:96px;margin-top: 17px;">
                <img src="../../../static/img/header-icon1.png">
            </a>
            <div class="adver-con" style="display: inline-block;margin-left: 24px;margin-top: 17px;">
                <img src="../../../static/img/header-icon2.png" style="height:96px;width: 160px;">
            </div>
            <div id="szHeaderSearch" class="shizhan-header-search">
                <div class="clearfix" style="height: 48px;">
                    <input class="shizhan-search-input" placeholder="搜索感兴趣的实战课程内容" type="text" autocomplete="off" data-suggest-trigger="true">
                    <a href="javascript:;" class="shizhan-search-button" data-search-btn="true">
                        <i class="el-icon-search"></i>
                    </a>
                    <div class="js-sz-searchtags shizhan-searchtags"></div>
                    <input type="hidden" data-suggest-history="true">
                    <ul class="shizhan-search-result" data-suggest-result="true"></ul>
                </div>
                <div class="search-hot clearfix" style="height: 18px;">
                    <span>热搜：</span>
                    <a target="_blank" href="//www.imooc.com/search/course?words=React.js&amp;type=sz">React.js</a>
                    <a target="_blank" href="//www.imooc.com/search/course?words=面试&amp;type=sz">面试</a>
                    <a target="_blank" href="//www.imooc.com/search/course?words=算法&amp;type=sz">算法</a>
                    <a target="_blank" href="//www.imooc.com/search/course?words=Vue.js&amp;type=sz">Vue.js</a>
                    <a target="_blank" href="//www.imooc.com/search/course?words=Python&amp;type=sz">Python</a>
                    <a target="_blank" href="//www.imooc.com/search/course?words=人工智能&amp;type=sz">人工智能</a>
                    <a target="_blank" href="//www.imooc.com/search/course?words=GO语言&amp;type=sz">GO语言</a>
                    <a target="_blank" href="//www.imooc.com/search/course?words=小程序&amp;type=sz">小程序</a>
                </div>
            </div>
        </div>
    </div>
    <div class="shizhan-header-nav">
        <div class="clearfix" style="height: 40px;">
            <a href="#" id="cato" class="cur">全部</a>
            <a href="#" class="" data-ct="nt">前沿技术</a>
            <a href="#" class="" data-ct="fe">前端开发</a>
            <a href="#" class="" data-ct="be">后端开发</a>
            <a href="#" class="" data-ct="mobile">移动开发</a>
            <a href="#" class="" data-ct="algorithm">算法&amp;数学</a>
            <a href="#" class="" data-ct="cb">云计算&amp;大数据</a>
            <a href="#" class="" data-ct="op">运维&amp;测试</a>
            <a href="#" class="" data-ct="data">数据库</a>
            <a href="#" class="" data-ct="photo">UI设计&amp;多媒体</a>
        </div>
    </div>
    <div class="shizhan-skill clearfix">
        <a href="#" class="on">不限</a>
        <a href="#" class="">Swoole</a>
        <a href="#" class="">微服务</a>
        <a href="#" class="">区块链</a>
        <a href="#" class="">机器学习</a>
        <a href="#" class="">深度学习</a>
        <a href="#" class="">计算机视觉</a>
        <a href="#" class="">自然语言处理</a>
        <a href="#" class="">数据分析&amp;挖掘</a>
        <a href="#" class="">小程序</a>
        <a href="#" class="">HTML/CSS</a>
        <a href="#" class="">JavaScript</a>
        <a href="#" class="">Vue.js</a>
        <a href="#" class="">React.JS</a>
        <a href="#" class="">Angular</a>
        <a href="#" class="">Node.js</a>
        <a href="#" class="">jQuery</a>
        <a href="#" class="">WebApp</a>
        <a href="#" class="">前端工具</a>
        <a href="#" class="">Java</a>
        <a href="#" class="">SpringBoot</a>
        <a href="#" class="">SSM</a>
        <a href="#" class="">Python</a>
        <a href="#" class="">爬虫</a>
        <a href="#" class="">Django</a>
        <a href="#" class="">Flask</a>
        <a href="#" class="">Tornado</a>
        <a href="#" class="">Go</a>
        <a href="#" class="">PHP</a>
        <a href="#" class="">C</a>
        <a href="#" class="">C++</a>
        <a href="#" class="">Android</a>
        <a href="#" class="">iOS</a>
        <a href="#" class="">React native</a>
        <a href="#" class="">Ionic</a>
        <a href="#" class="">算法与数据结构</a>
        <a href="#" class="">数学</a>
        <a href="#" class="">大数据</a>
        <a href="#" class="">Hadoop</a>
        <a href="#" class="">Spark</a>
        <a href="#" class="">Hbase</a>
        <a href="#" class="">Storm</a>
        <a href="#" class="">阿里云</a>
        <a href="#" class="">Docker</a>
        <a href="#" class="">Kubernetes</a>
        <a href="#" class="">运维</a>
        <a href="#" class="">自动化运维</a>
        <a href="#" class="">中间件</a>
        <a href="#" class="">Linux</a>
        <a href="#" class="">功能测试</a>
        <a href="#" class="">性能测试</a>
        <a href="#" class="">自动化测试</a>
        <a href="#" class="">接口测试</a>
        <a href="#" class="">移动测试</a>
        <a href="#" class="">MySQL</a>
        <a href="#" class="">Redis</a>
        <a href="#" class="">MongoDB</a>
        <a href="#" class="">动效动画</a>
        <a href="#" class="">设计基础</a>
        <a href="#" class="">设计工具</a>
        <a href="#" class="">APPUI设计</a>
        <a href="#" class="">算法</a>
        <a href="#" class="">NoSql</a>
        <a href="#" class="">数据结构</a>
    </div>
    <div class="w index-main">
        <div class="screening-box clearfix">
		    <div class="screening-time l clearfix">
				<a href="#" class="on">默认排序</a>
			    <a href="#">最新</a>
			    <a href="#">销量</a>
			    <a href="#">评价</a>
			</div>
		</div>
        <div class="index-list-wrap">
            <div class="shizhan-course-list clearfix">			            			                                                                                                                                                                   
                <div class="shizhan-course-wrap l ">
                    <a href="/class/303.html">
                        <div class="shizhan-course-box">
                            <div class="course-stat new">新课</div>
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="剑指Java面试-Offer直通车" src="//img.mukewang.com/szimg/5c18d2d8000141c506000338-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="剑指Java面试-Offer直通车">剑指Java面试-Offer直通车</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>774</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="让百度资深面试官来为你的高薪Offer保驾护航">让百度资深面试官来为你的高薪Offer保驾护航</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                                                                                                       
                <div class="shizhan-course-wrap l ">
                    <a href="/class/187.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="Spring Cloud微服务实战" src="//img.mukewang.com/szimg/5a9ca4e80001786305400300-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="Spring Cloud微服务实战">Spring Cloud微服务实战</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">高级</span>
                                            <span><i class="el-icon-view"></i>2777</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="熟练使用SpringCloud组件实现微服务，向架构师迈进！【已升级至Finchley.Release】">熟练使用SpringCloud组件实现微服务，向架构师迈进！【已升级至Finchley.Release】</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="shizhan-course-wrap l ">
                    <a href="/class/203.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="Vue2.5开发去哪儿网App 从零基础入门到实战项目" src="//img.mukewang.com/szimg/5ac2dfe100014a9005400300-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="Vue2.5开发去哪儿网App 从零基础入门到实战项目">Vue2.5开发去哪儿网App 从零基础入门到实战项目</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>4312</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="从基础语法到完整项目，一套课程掌握Vue基础知识点">从基础语法到完整项目，一套课程掌握Vue基础知识点</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="shizhan-course-wrap l nomr">
                    <a href="/class/96.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="从0开始 独立完成企业级Java电商网站开发" src="//img.mukewang.com/szimg/58f57d200001461105400300-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="从0开始 独立完成企业级Java电商网站开发">从0开始 独立完成企业级Java电商网站开发</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>6371</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="【毕设】前后端分离，数据库接口设计，架构设计，功能开发，上线运维">【毕设】前后端分离，数据库接口设计，架构设计，功能开发，上线运维</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                             
                <div class="shizhan-course-wrap l ">
                    <a href="/class/228.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="Vue.js 源码全方位深入解析 " src="//img.mukewang.com/szimg/5b17bad10001535305400300-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="Vue.js 源码全方位深入解析 ">Vue.js 源码全方位深入解析 </p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">高级</span>
                                            <span><i class="el-icon-view"></i>1549</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="全方位讲解 Vue.js 源码，学精学透 Vue 原理实现，进阶高级工程师">全方位讲解 Vue.js 源码，学精学透 Vue 原理实现，进阶高级工程师</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                           
                <div class="shizhan-course-wrap l ">
                    <a href="/class/304.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="新版React Native+Redux打造高质量上线App" src="//img.mukewang.com/szimg/5c106a8f0001d0ea06000338-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="新版React Native+Redux打造高质量上线App">新版React Native+Redux打造高质量上线App</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>149</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="解锁React Native开发应用新姿势，一网打尽React Native新版本热门技术">解锁React Native开发应用新姿势，一网打尽React Native新版本热门技术</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                             
                <div class="shizhan-course-wrap l ">
                    <a href="/class/306.html">
                        <div class="shizhan-course-box">
                            <div class="course-stat new">新课</div>
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="掌握Taro多端框架 快速上手小程序/H5开发" src="//img.mukewang.com/szimg/5c2212b30886a3e606000338-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="掌握Taro多端框架 快速上手小程序/H5开发">掌握Taro多端框架 快速上手小程序/H5开发</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>20</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="学会Taro框架，搞定多端应用开发（H5,小程序，ReactNative,快应用...）">学会Taro框架，搞定多端应用开发（H5,小程序，ReactNative,快应用...）</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                			                                                                                                   
                <div class="shizhan-course-wrap l nomr">
                    <a href="/class/195.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="Java并发编程入门与高并发面试" src="//img.mukewang.com/szimg/5aaa55850001a3ef10800600-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="Java并发编程入门与高并发面试">Java并发编程入门与高并发面试</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">初级</span>
                                            <span><i class="el-icon-view"></i>2762</span>                                                                                              
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="构建完整并发与高并发知识体系，倍增高薪面试成功率！">构建完整并发与高并发知识体系，倍增高薪面试成功率！</p>                                
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                            
                <div class="shizhan-course-wrap l ">
                    <a href="/class/136.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="全面系统 Python3入门+进阶课程 更快上手实际开发" src="//img.mukewang.com/szimg/59b8a486000107fb05400300-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="全面系统 Python3入门+进阶课程 更快上手实际开发">全面系统 Python3入门+进阶课程 更快上手实际开发</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">初级</span>
                                            <span><i class="el-icon-view"></i>7039</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="入门就是最新版本，让你快速掌握Python3">入门就是最新版本，让你快速掌握Python3</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                           
                <div class="shizhan-course-wrap l ">
                    <a href="/class/207.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="玩转数据结构 从入门到进阶" src="//img.mukewang.com/szimg/5ad05dc00001eae705400300-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="玩转数据结构 从入门到进阶">玩转数据结构 从入门到进阶</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>2898</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="从基础的底层知识到细致的算法讲解，完整的课程脉络帮你构建数据结构思想">从基础的底层知识到细致的算法讲解，完整的课程脉络帮你构建数据结构思想</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="shizhan-course-wrap l ">
                    <a href="/class/301.html">
                        <div class="shizhan-course-box">
                            <div class="course-stat new">新课</div>
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="Hadoop基础与电商行为日志分析   新手入门大数据" src="//img.mukewang.com/szimg/5c203a4b0001dcf306000338-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="Hadoop基础与电商行为日志分析   新手入门大数据">Hadoop基础与电商行为日志分析   新手入门大数据</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>35</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="从Hadoop核心技术入手，掌握数据处理中ETL应用，轻松进军大数据">从Hadoop核心技术入手，掌握数据处理中ETL应用，轻松进军大数据</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="shizhan-course-wrap l nomr">
                    <a href="/class/305.html">
                        <div class="shizhan-course-box">
                            <div class="course-stat new">新课</div>
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="LoadRunner性能测试实战训练营" src="//img.mukewang.com/szimg/5c1701d10001a15e06000338-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="LoadRunner性能测试实战训练营">LoadRunner性能测试实战训练营</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>13</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="从基础到项目实战，一站式掌握性能测试全流程">从基础到项目实战，一站式掌握性能测试全流程</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                            
                <div class="shizhan-course-wrap l ">
                    <a href="/class/302.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="React16 组件化+测试+全流程 实战在线账本项目" src="//img.mukewang.com/szimg/5c0a56cf00012bc106000338-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="React16 组件化+测试+全流程 实战在线账本项目">React16 组件化+测试+全流程 实战在线账本项目</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>45</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="轻松上手，从设计图到上线，精通组件化思维和组件测试，掌握大厂的开发模式和流程">轻松上手，从设计图到上线，精通组件化思维和组件测试，掌握大厂的开发模式和流程</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                            
                <div class="shizhan-course-wrap l ">
                    <a href="/class/299.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="功能测试转型必备课程   零基础入门Web自动化测试" src="//img.mukewang.com/szimg/5bfd070e0001f11606000338-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="功能测试转型必备课程   零基础入门Web自动化测试">功能测试转型必备课程   零基础入门Web自动化测试</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">初级</span>
                                            <span><i class="el-icon-view"></i>25</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="轻松转型，快速胜任自动化测试工程师岗位，让你在软测行业更抢手，更值钱！">轻松转型，快速胜任自动化测试工程师岗位，让你在软测行业更抢手，更值钱！</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="shizhan-course-wrap l ">
                    <a href="/class/298.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="深度学习之目标检测常用算法原理+实践精讲" src="//img.mukewang.com/szimg/5bfb523c0001290905400300-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="深度学习之目标检测常用算法原理+实践精讲">深度学习之目标检测常用算法原理+实践精讲</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">高级</span>
                                            <span><i class="el-icon-view"></i>67</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="从原理（YOLO / Faster RCNN / SSD / 文本检测 / 多任务网络）到场景实战，掌握目标检测核心技术">从原理（YOLO / Faster RCNN / SSD / 文本检测 / 多任务网络）到场景实战，掌握目标检测核心技术</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                            
                <div class="shizhan-course-wrap l nomr">
                    <a href="/class/297.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="BAT大牛亲授--个性化推荐算法实战" src="//img.mukewang.com/szimg/5bf53d9b0001124b06000338-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="BAT大牛亲授--个性化推荐算法实战">BAT大牛亲授--个性化推荐算法实战</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>97</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="结合多年项目实战经验，让你掌握一套完整的，能落地的个性化推荐算法体系">结合多年项目实战经验，让你掌握一套完整的，能落地的个性化推荐算法体系</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                           
                <div class="shizhan-course-wrap l ">
                    <a href="/class/293.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="商业级支付宝小程序入门与实战" src="//img.mukewang.com/szimg/5bf2187300015bd405400300-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="商业级支付宝小程序入门与实战">商业级支付宝小程序入门与实战</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">初级</span>
                                            <span><i class="el-icon-view"></i>62</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="从需求分析,功能开发到发布上线，让你掌握商业级支付宝小程序开发的每个环节.">从需求分析,功能开发到发布上线，让你掌握商业级支付宝小程序开发的每个环节.</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                            
                <div class="shizhan-course-wrap l ">
                    <a href="/class/289.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="高等数学-学习算法/人工智能/大数据的第一步" src="//img.mukewang.com/szimg/5be176260001720e06000338-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="高等数学-学习算法/人工智能/大数据的第一步">高等数学-学习算法/人工智能/大数据的第一步</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">初级</span>
                                            <span><i class="el-icon-view"></i>454</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="这是一门能让你看的懂、学的会的高等数学基础课">这是一门能让你看的懂、学的会的高等数学基础课</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                            
                <div class="shizhan-course-wrap l ">
                    <a href="/class/292.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="RocketMQ核心技术精讲与高并发抗压实战" src="//img.mukewang.com/szimg/5bd975330001720c05400300-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="RocketMQ核心技术精讲与高并发抗压实战">RocketMQ核心技术精讲与高并发抗压实战</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="imv2-set-sns"></i>144</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="理论+实战，系统掌握RocketMQ核心技术,  挑战“双11” 高并发抗压实战">理论+实战，系统掌握RocketMQ核心技术,  挑战“双11” 高并发抗压实战</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                        
                <div class="shizhan-course-wrap l nomr">
                    <a href="/class/295.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="Go语言实战抽奖系统" src="//img.mukewang.com/szimg/5bd850500001a8ca06000338-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="Go语言实战抽奖系统">Go语言实战抽奖系统</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>117</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="攻克业务、技术重点难点，开发设计高性能、高并发、灵活、可靠的服务系统。">攻克业务、技术重点难点，开发设计高性能、高并发、灵活、可靠的服务系统。</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="shizhan-course-wrap l ">
                    <a href="/class/75.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="微信小程序入门与实战 常用组件API开发技巧项目实战" src="//img.mukewang.com/szimg/5c0493ce000126b106000338-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="微信小程序入门与实战 常用组件API开发技巧项目实战">微信小程序入门与实战 常用组件API开发技巧项目实战</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">初级</span>
                                            <span><i class="el-icon-view"></i>15986</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="经典小程序课程再度升级  结合知识点与完整项目掌握小程序开发技能">经典小程序课程再度升级  结合知识点与完整项目掌握小程序开发技能</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                            
                <div class="shizhan-course-wrap l ">
                    <a href="/class/294.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="Nodejs + React 实战开发区块链慕课Dapp 专门为前端工程师设计" src="//img.mukewang.com/szimg/5bd2f92e0001930506000338-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="Nodejs + React 实战开发区块链慕课Dapp 专门为前端工程师设计">Nodejs + React 实战开发区块链慕课Dapp 专门为前端工程师设计</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>86</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="熟练掌握区块链技术原理+以太网开发技能 开发一个成熟的区块链Dapp项目">熟练掌握区块链技术原理+以太网开发技能 开发一个成熟的区块链Dapp项目</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                             
                <div class="shizhan-course-wrap l ">
                    <a href="/class/288.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="主流技术栈的Restful API接口测试实战" src="//img.mukewang.com/szimg/5bd066070001d68c06000338-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="主流技术栈的Restful API接口测试实战">主流技术栈的Restful API接口测试实战</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>66</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="使用当前新版Postman、Junit5、RestAssured，从入门到精通实战学习接口自动化测试">使用当前新版Postman、Junit5、RestAssured，从入门到精通实战学习接口自动化测试</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                             
                <div class="shizhan-course-wrap l nomr">
                    <a href="/class/287.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="EasySwoole+ElasticSearch打造高性能小视频服务系统" src="//img.mukewang.com/szimg/5bce9a04000115d105400300-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="EasySwoole+ElasticSearch打造高性能小视频服务系统">EasySwoole+ElasticSearch打造高性能小视频服务系统</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>136</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="理论+实战，系统掌握EasySwoole框架，从容应对高并发、高性能业务，成为有竞争力的PHP工程师。">理论+实战，系统掌握EasySwoole框架，从容应对高并发、高性能业务，成为有竞争力的PHP工程师。</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="shizhan-course-wrap l ">
                    <a href="/class/290.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="Tornado从入门到进阶 打造支持高并发的技术论坛" src="//img.mukewang.com/szimg/5bd005810001ae3d05400300-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="Tornado从入门到进阶 打造支持高并发的技术论坛">Tornado从入门到进阶 打造支持高并发的技术论坛</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>141</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="异步IO并发编程/全面涉及Form，异步ORM/异步驱动aiomysql、peewee-async/epoll">异步IO并发编程/全面涉及Form，异步ORM/异步驱动aiomysql、peewee-async/epoll</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                           
                <div class="shizhan-course-wrap l ">
                    <a href="/class/285.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="Vue2.5 实战微信读书   媲美原生App的企业级web书城" src="//img.mukewang.com/szimg/5c0886650001e7b106000338-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="Vue2.5 实战微信读书   媲美原生App的企业级web书城">Vue2.5 实战微信读书   媲美原生App的企业级web书城</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>221</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="Vue全家桶+最新前端技术+前后端分离架构，完整项目流程带你突破Vue进阶瓶颈">Vue全家桶+最新前端技术+前后端分离架构，完整项目流程带你突破Vue进阶瓶颈</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                            
                <div class="shizhan-course-wrap l ">
                    <a href="/class/74.html">
                        <div class="shizhan-course-box">
                           <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="Vue.js 2.5 + cube-ui 重构饿了么 App" src="//img.mukewang.com/szimg/5becd5ad0001b89306000338-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="Vue.js 2.5 + cube-ui 重构饿了么 App">Vue.js 2.5 + cube-ui 重构饿了么 App</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="imv2-set-sns"></i>7171</span>
                                        </div>
                                    </div>                                       
                                    <p class="shizan-desc" title="掌握Vue1.0到2.0再到2.5最全版本应用与迭代，打造极致流畅的WebApp">掌握Vue1.0到2.0再到2.5最全版本应用与迭代，打造极致流畅的WebApp</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                            
                <div class="shizhan-course-wrap l nomr">
                    <a href="/class/286.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="Socket网络编程进阶与实战" src="//img.mukewang.com/szimg/5bc3f1420001abf206000338-360-202.jpg">
                                 </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="Socket网络编程进阶与实战">Socket网络编程进阶与实战</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>725</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="理论+实践，系统且深入掌握Socket核心技术，从容应对各种Socket应用场景的不二之选">理论+实践，系统且深入掌握Socket核心技术，从容应对各种Socket应用场景的不二之选</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                             
                <div class="shizhan-course-wrap l ">
                    <a href="/class/281.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="Go语言开发分布式任务调度 轻松搞定高性能Crontab " src="//img.mukewang.com/szimg/5bbc82dd000134e012000676-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="Go语言开发分布式任务调度 轻松搞定高性能Crontab ">Go语言开发分布式任务调度 轻松搞定高性能Crontab </p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>262</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="分布式系统设计+高并发细节处理，一次性让你“晋级”到位">分布式系统设计+高并发细节处理，一次性让你“晋级”到位</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                             
                <div class="shizhan-course-wrap l ">
                    <a href="/class/280.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="Vue全家桶+SSR+Koa2全栈开发美团网" src="//img.mukewang.com/szimg/5baf3f0a000180df06000338-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="Vue全家桶+SSR+Koa2全栈开发美团网">Vue全家桶+SSR+Koa2全栈开发美团网</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>962</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="整合大前端8项技术，全面晋级全栈工程师。">整合大前端8项技术，全面晋级全栈工程师。</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                           
                <div class="shizhan-course-wrap l ">
                    <a href="/class/284.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="Kubernetes实战 高可用集群搭建，配置，运维与应用" src="//img.mukewang.com/szimg/5bab70af00014fe105400300-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="Kubernetes实战 高可用集群搭建，配置，运维与应用">Kubernetes实战 高可用集群搭建，配置，运维与应用</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>186</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="以生产为目标，原理+操作， Kubernetes结合典型云原生应用">以生产为目标，原理+操作， Kubernetes结合典型云原生应用</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                            
                <div class="shizhan-course-wrap l nomr">
                    <a href="/class/282.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="three.js-打造微信爆款小游戏跳一跳" src="//img.mukewang.com/szimg/5ba995620001d42c05400300-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="three.js-打造微信爆款小游戏跳一跳">three.js-打造微信爆款小游戏跳一跳</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">高级</span>
                                            <span><i class="el-icon-view"></i>188</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="three.js+WebGL+微信小游戏API， 带你进入3D的游戏世界">three.js+WebGL+微信小游戏API， 带你进入3D的游戏世界</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                            
                <div class="shizhan-course-wrap l ">
                    <a href="/class/283.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="Python 爬虫工程师必学 App数据抓取实战" src="//img.mukewang.com/szimg/5ba300690001052206000338-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="Python 爬虫工程师必学 App数据抓取实战">Python 爬虫工程师必学 App数据抓取实战</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>331</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="掌握App数据抓取技能，工作面试更自信">掌握App数据抓取技能，工作面试更自信</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                         
                <div class="shizhan-course-wrap l ">
                    <a href="/class/276.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="React 服务器渲染原理解析与实践" src="//img.mukewang.com/szimg/5ba07190000135b505400300-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="React 服务器渲染原理解析与实践">React 服务器渲染原理解析与实践</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">高级</span>
                                            <span><i class="el-icon-view"></i>310</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="从零开始，带你搭建属于自己的React SSR框架，从根本上解决客户端渲染问题 。">从零开始，带你搭建属于自己的React SSR框架，从根本上解决客户端渲染问题 。</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                          
                <div class="shizhan-course-wrap l ">
                    <a href="/class/279.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="FFmpeg音视频核心技术精讲与实战" src="//img.mukewang.com/szimg/5b9b1bb70001b4ba06000338-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="FFmpeg音视频核心技术精讲与实战">FFmpeg音视频核心技术精讲与实战</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>329</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="学好FFmpeg核心技术，做高效，高薪，有竞争力的音视频工程师">学好FFmpeg核心技术，做高效，高薪，有竞争力的音视频工程师</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                          
                <div class="shizhan-course-wrap l nomr">
                    <a href="/class/278.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="企业级开源四层负载均衡解决方案--LVS" src="//img.mukewang.com/szimg/5b99c15f0001ca0206000338-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="企业级开源四层负载均衡解决方案--LVS">企业级开源四层负载均衡解决方案--LVS</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>87</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="轻松应对负载均衡，深刻理解网络系统架构，真正解决工作中的实际问题">轻松应对负载均衡，深刻理解网络系统架构，真正解决工作中的实际问题</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                           
                <div class="shizhan-course-wrap l ">
                    <a href="/class/277.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="小白福音， 零基础入门软件测试 首选必备课程" src="//img.mukewang.com/szimg/5b97a3e90001f82b05400300-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="小白福音， 零基础入门软件测试 首选必备课程">小白福音， 零基础入门软件测试 首选必备课程</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">入门</span>
                                            <span><i class="el-icon-view"></i>311</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="零基础入门软件测试，全方位多角度实战讲解黑盒等多种类型的测试方法">零基础入门软件测试，全方位多角度实战讲解黑盒等多种类型的测试方法</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                            
                <div class="shizhan-course-wrap l ">
                    <a href="/class/273.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="应用Dubbo框架打造仿猫眼项目 理解微服务核心思想" src="//img.mukewang.com/szimg/5b95cd0e0001e8c406000338-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="应用Dubbo框架打造仿猫眼项目 理解微服务核心思想">应用Dubbo框架打造仿猫眼项目 理解微服务核心思想</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="imv2-set-sns"></i>428</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="实战Dubbo项目+面试技巧，老司机带你畅游微服务">实战Dubbo项目+面试技巧，老司机带你畅游微服务</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                            
                <div class="shizhan-course-wrap l ">
                    <a href="/class/296.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt="MySQL面试指南" src="//img.mukewang.com/szimg/5bdc3b81000178e812000676-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title="MySQL面试指南">MySQL面试指南</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">中级</span>
                                            <span><i class="el-icon-view"></i>92</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="9大类常见问题详解，切实提升数据库应用和管理能力，升职加薪必备佳品！">9大类常见问题详解，切实提升数据库应用和管理能力，升职加薪必备佳品！</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>                                        
                <div class="shizhan-course-wrap l nomr">
                    <a href="/class/300.html">
                        <div class="shizhan-course-box">
                            <div class="box">
                                <div class="img-box">
                                    <img class="shizhan-course-img" alt=" 面试提升必备   全面解析  iOS  中的 Runtime机制" src="//img.mukewang.com/szimg/5c0731ab0001872306000338-360-202.jpg">
                                </div>
                                <div class="shizhan-intro-box">
                                    <p class="shizan-name" title=" 面试提升必备   全面解析  iOS  中的 Runtime机制"> 面试提升必备   全面解析  iOS  中的 Runtime机制</p>
                                    <div class="evaluation-box">
                                        <div class="shizhan-info">
                                            <span class="grade">高级</span>
                                            <span><i class="el-icon-view"></i>18</span>
                                        </div>
                                    </div>
                                    <p class="shizan-desc" title="面试iOS高薪职位，满足复杂的业务需求，开发高性能APP，Runtime技术不可不学。">面试iOS高薪职位，满足复杂的业务需求，开发高性能APP，Runtime技术不可不学。</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="page">
                <span class="disabled_page">首页</span>
                <span class="disabled_page">上一页</span>
                <a href="javascript:void(0)" class="active">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">5</a>
                <a href="#">下一页</a>
                <a href="#">尾页</a>
            </div>
        </div>
    </div>
    <div id="footer" data="course,list">
      <div class="waper">
        <div class="footerwaper clearfix">
          <div class="followus r">
            <a class="followus-weixin" href="javascript:;" target="_blank" title="微信">
              <div class="flw-weixin-box"></div>
            </a>
            <a class="followus-weibo" href="http://weibo.com/u/3306361973" target="_blank" title="新浪微博"></a>
            <a class="followus-qzone" href="http://user.qzone.qq.com/1059809142/" target="_blank" title="QQ空间"></a>
          </div>
          <div class="footer_intro l">
            <div class="footer_link">
              <ul>
                <li><a href="//www.imooc.com/" target="_blank">网站首页</a></li>
                <li><a href="/about/cooperate" target="_blank" title="企业合作">企业合作</a></li>
                <li><a href="/about/job" target="_blank">人才招聘</a></li>
                <li> <a href="/about/contact" target="_blank">联系我们</a></li>
                <li> <a href="/about/recruit" target="_blank">讲师招募</a></li>
                <li> <a href="/about/faq" target="_blank">常见问题</a></li>
                <li> <a href="/user/feedback" target="_blank">意见反馈</a></li>
                <li><a href="http://daxue.imooc.com/" target="_blank">慕课大学</a></li>
                <li> <a href="/about/friendly" target="_blank">友情链接</a></li>
              </ul>
            </div>
            <p>Copyright © 2018 imooc.com All Rights Reserved | 京ICP备 12003892号-11 </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
  #nav {
    padding: 0 15px;
  }
  ol, ul {
    list-style: none;
  }
  address, caption, cite, code, dfn, em, strong, th, var, optgroup {
    font-style: normal;
    font-weight: 400;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: 400;
  }
  :link, :visited, ins {
    text-decoration: none;
  }
  a:active, a:hover {
    color: #ec1500;
  }
  a, button, input {
      outline: 0;
  }
  button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
  }
  a {
    background-color: transparent;
  }
  fieldset, img {
    border: 0;
  }
  .search-area {
    width: 140px !important;
  }
  .l {
    float: left;
  }
  .r {
    float: right;
  }
  #header{
    background: #07111b;
    color: #fff;
    .header{
      width: 1152px;
      height: 40px;
      margin: 0 auto;
      font-size: 12px;
      .header-left{
        li{
          float: left;
          margin-right: 12px;
          transition: .3s;
          margin: 0;
          a{
            display: block;
            height: 40px;
            line-height: 40px;
            color: rgba(255,255,255,.6);
            text-decoration: none;
            padding: 0 15px !important;
            position: relative;
          }
          .active {
              color: #fff;
            }
          a:hover{
            color: #fff;
            background: rgba(255,255,255,.1);
          }
        } 
      }
    } 
  }
  .shizhan-header {
    height: 132px;
    background: url(../../../static/img/sz-header-bk.png) no-repeat;
    background-size: cover;
    box-sizing: border-box;
    .shizhan-header-wrap {
        width: 1152px;
        margin-left: auto;
        margin-right: auto;
    }
    .header-icon1 {
        float: left;
        width: 196px;
        height: 96px;
        overflow: hidden;
        margin-top: 17px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .shizhan-header-search {
        float: right;
        position: relative;
        width: 560px;
        height: 48px;
        margin: 36px auto 0;
        background: #fff;
        border-radius: 8px;
        .shizhan-search-input {
            float: left;
            width: 512px;
            height: 48px;
            padding: 0 16px;
            border: 0;
            font-size: 16px;
            color: #07111b;
            line-height: 48px;
            box-sizing: border-box;
            border-radius: 8px 0 0 8px;
        }
        .shizhan-search-button {
            float: left;
            background: #f01414;
            width: 48px;
            height: 48px;
            line-height: 48px;
            text-align: center;
            font-size: 16px;
            color: #fff;
            border-radius: 0 8px 8px 0;
            i {
                font-size: 24px;
                color: #fff;
                line-height: 48px;
            }
        }
        .shizhan-searchtags {
            position: absolute;
            right: 128px;
            top: 0;
            height: 48px;
            line-height: 48px;
            text-align: right;
        }
        .shizhan-search-result {
            position: absolute;
            z-index: 2;
            left: 0;
            top: 49px;
            right: 48px;
            background: #fff;
            box-shadow: 0 8px 16px 0 rgba(7,17,27,.1);
            border-radius: 6px;
        }
    }
    .search-hot {
        margin-top: 8px;
        span {
            margin-right: 12px;
        }
        a {
            margin-right: 24px;
        }
        span, a {
            float: left;
            font-size: 12px;
            color: rgba(255,255,255,.8);
            line-height: 18px;
            transition: .3s all linear;
        }
    }
  }
  .shizhan-header-nav {
    height: 72px;
    background: #fff;
    box-shadow: 0 8px 16px 0 rgba(28,31,33,.1);
    padding: 16px 0;
    box-sizing: border-box;
    > div {
        width: 1152px;
        padding-left: 12px;
        box-sizing: border-box;
        margin-left: auto;
        margin-right: auto;
    }
    a.cur {
        color: #f01414;
    }
    a.cur::before {
        display: block;
    }
    a {
        float: left;
        font-size: 16px;
        color: #07111b;
        line-height: 40px;
        height: 40px;
        position: relative;
        margin-right: 46px;
        font-weight: 700;
    }
    a:hover {
        color: #f01414;
    }
    a::before {
        display: none;
        content: ' ';
        position: absolute;
        bottom: 0;
        background: #f01414;
        width: 16px;
        height: 3px;
        left: 50%;
        margin-left: -8px;
    }
    a:last-child {
        margin-right: 0;
    }
  }
  .shizhan-skill {
    width: 1152px;
    height: 264px;
    margin: 0 auto;
    padding: 24px 0 10px;
    border-bottom: 1px solid #d9dde1;
    a.on {
        color: #fff;
        background: #2b333b;
    }
    a:hover {
        background: #d9dde1;
    }
    a {
        float: left;
        margin-right: 20px;
        padding: 0 12px;
        font-size: 14px;
        color: #4d555d;
        line-height: 32px;
        border-radius: 16px;
        margin-bottom: 12px;
    }
  }
  .index-main {
    width: 100%;
    // height: 4004px;
    max-width: 1152px;
    position: relative;
    padding-bottom: 70px;
  }
  .w {
    margin: 0 auto;
  }
  .screening-box {
    position: relative;
    width: 100%;
    padding-bottom: 50px !important;
    padding: 20px 12px;
    box-sizing: border-box;
    .screening-time a.on {
        background: #93999f;
        color: #fff;
    }
    .screening-time a {
        float: left;
        padding: 4px 12px;
        font-size: 12px;
        line-height: 16px;
        color: #4d555d;
        height: 16px;
        margin-right: 12px;
        border-radius: 12px;
    }
    .screening-time a:hover {
        color: #07111b;
    }
  }
  .index-list-wrap {
    width: 100%;
    margin: 0 auto;
    .shizhan-course-list {
        width: 1152px;
        .nomr {
            margin-right: 0 !important;
        }
        .shizhan-course-wrap {
            position: relative;
            margin-bottom: 36px;
            margin-right: 24px;
            width: 270px;
            height: 280px;
            a {
                display: block;
            }
            a:hover .shizan-desc {
                color: #4d555d !important;
            }
            .shizhan-course-box {
                position: relative;
                width: 100%;
                height: 100%;
                .course-stat.new {
                    background-color: #fa0;
                    background-image: linear-gradient(90deg,#fa0 17%,#f76b1c 100%);
                }
                .course-stat {
                    font-family: SourceHanSansCN-Heavy;
                    position: absolute;
                    border: 2px solid #fff;
                    border-radius: 12px;
                    top: 8px;
                    left: -8px;
                    z-index: 4;
                    font-family: dincondm;
                    font-size: 12px;
                    color: #fff;
                    line-height: 20px;
                    padding: 0 8px;
                    font-weight: 700;
                }
                .img-box {
                    height: 148px;
                    max-height: 148px;
                    transition: .3s all linear;
                    position: relative;
                }
                .img-box img {
                    width: 100%;
                }
                .shizhan-course-img {
                    border-radius: 10px;
                    height: 148px;
                }
                .shizhan-intro-box {
                    position: relative;
                    width: 248px;
                    padding: 0 12px;
                    min-height: 112px;
                    .shizan-name {
                        font-size: 16px;
                        line-height: 24px;
                        font-weight: 700;
                        max-height: 48px;
                        margin-top: 16px;
                        transition: .3s all linear;
                        word-break: break-all;
                        word-wrap: break-word;
                        overflow: hidden;
                        text-overflow: -o-ellipsis-lastline;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        color: #2b333b;
                    }
                    .evaluation-box {
                        position: relative;
                        margin-top: 4px;
                    }
                    .shizhan-info {
                        font-size: 12px;
                        line-height: 20px;
                        color: #93999f;
                        transition: .3s all linear;
                        .grade {
                            margin-right: 12px;
                        }
                        .el-icon-view{
                            font-size: 12px;
                            margin-right: 2px;
                            color: #93999f;
                            transition: .3s all linear;
                        }
                    }
                    .shizan-desc {
                        margin-top: 4px;
                        font-size: 12px;
                        color: #93999f;
                        max-height: 48px;
                        line-height: 24px;
                        word-break: break-all;
                        word-wrap: break-word;
                        overflow: hidden;
                        transition: .3s all linear;
                        text-overflow: -o-ellipsis-lastline;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                }
            }
        }
    }
  }
  .page {
    margin-top: 0;
    padding: 25px 0 0 0;
  }
  .page {
    margin: 25px 0 auto;
    overflow: hidden;
    clear: both;
    text-align: center;
  }
  .page span, .page-disabled {
    display: inline-block;
    padding: 0 12px;
    min-width: 20px;
    height: 39px;
    line-height: 39px;
    font-size: 14px;
    color: #93999f;
    text-align: center;
  }
  .page a.active {
    background: #4d555d;
    color: #fff;
  }
  .page a {
    display: inline-block;
    margin: 0 12px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    color: #4d555d;
    text-align: center;
    border-radius: 50%;
    -webkit-transition: border-color .2s;
    -moz-transition: border-color .2s;
    transition: border-color .2s;
  }
  .page a:hover {
    text-decoration: none;
    background-color: #d9dde1;
  }
  .page a:first-child, .page a:last-child, .page a:nth-child(2), .page a:nth-last-child(2) {
    width: auto;
  }
  #footer {
    background: #1c1f21;
    border-top: 1px solid #e2e4e6;
    font-size: 12px;
    color: #787d82;
    height: 45px;
    padding: 27px 0;
    min-width: 620px;
    .waper {
      width: auto;
      max-width: 1200px;
    }
    .followus {
      margin-right: 34px;
      padding-left: 30px;
    }
    .footer_intro {
      padding-left: 40px;
    }
    .footer_link {
      margin-bottom: 4px;
      line-height: 1.8;
      li {
        margin-right: 30px;
        text-align: center;
        float: left;
      }
    }
    p {
      line-height: 1.7;
    }
  }
  .waper {
    width: 1200px;
    margin: 0 auto;
  }
  .followus .followus-weixin {
    background-position: 0 -279px;
  }
  .followus .followus-weibo {
    background-position: 0 -321px;
  }
  .followus .followus-qzone {
    background-position: 0 -363px;
  }
  .followus a {
    float: left;
    position: relative;
    width: 32px;
    height: 32px;
    background-image: url(../../../static/img/footer-sprite.png?t=2);
    background-repeat: no-repeat;
    margin: 3px 6px 0;
    opacity: .5;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    transition: opacity .2s;
    z-index: 2;
  }
  .footer_link ul {
    overflow: hidden;
    margin-top: -1px;
  }
  .footer_link a:active, .footer_link a:link, .footer_link a:visited {
    color: #c8cdd2;
  }
  .footer_link a:hover {
    color: #fff;
}
</style>


